<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-title" content="启蒙">
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 设置苹果工具栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <meta name="format-detection" content="telephone=no">
    <title>{$info.title}</title>
    <link rel="stylesheet" href="/res/pltf/live/css/reset.7588.css?v=20171014.104410">
    <link rel="stylesheet" href="/res/pltf/live/css/main.9707.css?v=20180105.110156">

    <link rel="stylesheet" href="/res/layui/css/layui.css">

    <script src="/res/lib/vue.js"></script>
    <script src="/res/lib/jquery-3.1.0.min.js?v=20171209.193011"></script>
    <script src="/res/layui/layui.js"></script>
    <script src="/res/layui/layer_mobile/layer.js"></script>
    <script src="/res/lib/jquery.qrcode.min.js"></script>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        html, body, #app {
            height: 100%;
            position: relative;
        }

        .flex-main {
            position: relative;
        }

        /* 可以设置不同的进入和离开动画 */
        /* 设置持续时间和动画函数 */
        .slide-fade-enter-active {
            transition: .3s all ease;
        }

        .slide-fade-leave-active {
            transition: .8s all cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .slide-fade-enter, .slide-fade-leave-to {
            transform: translateY(50px);
            opacity: 0;
        }
    </style>
</head>
<body>

<!-- 页面加载loading -->
<div id="page-loading" style="display: none;">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <img class="loader-pic" src="/res/images/loader.gif?v=20170722.014513" alt="加载中 ...">
            <h5 class="loader-text">启蒙微课堂</h5>
        </div>
    </div>
</div>

<div id="app">
    <main class="flex-main">
        <div class="masking"></div>
        <div class="flex-other-bar">
            <div class="top-live-bar">
                <div class="left-item" style="flex: 0 0 0.9rem;">
                    <div class="account-zone">
                        <div class="cover-zone">
                            <img alt="" class="cover-img" src="{$info.photo}">
                        </div>
                        <button type="button" class="follow-btn" style="display: none;">关注</button>
                    </div>
                </div>
                <div class="info-item">
                    <h1 class="i-tit">{$info.live_name}</h1>
                    <div class="light-zone"><span>{$info.be_guanzhu}</span>人次 <span
                            class=""> • <span>{$info.state}</span></span></div>
                </div>
                <div class="right-item" style="    flex: 0 0 0.9rem;">
                    <button type="button" onclick="ctrl.open_talk();" class="barrage-control comment">
                        <span class="text">讨论</span>
                    </button>
                    <!--<button type="button" class="barrage-control danmu" style=""><span class="text">弹幕</span></button>-->
                    <!--<button type="button" class="barrage-control danmu-off" style="display: none;"><span-->
                    <!--class="text">收起</span>-->
                    <!--</button>-->
                </div>
            </div>
        </div>
        <!--弹幕-->
        <!--<div class="lr-danmu-box" style="display: none;">-->
        <!--<dl id="rd-lastest-discuss" class="danmulist">&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;-->
        <!--<dd class="one-latest-discuss"><i><img-->
        <!--src="https://img.wekuo.com/upload/user/portrait/1975867/20180118_121655?imageView2/2/w/40"></i>-->
        <!--<p>期待中</p></dd>-->
        <!--<dd class="one-latest-discuss"><i><img-->
        <!--src="https://img.wekuo.com/upload/user/portrait/1624602/20180104_042800?imageView2/2/w/40"></i>-->
        <!--<p>TD244</p></dd>-->
        <!--<dd class="one-latest-discuss"><i><img-->
        <!--src="https://img.wekuo.com/upload/user/portrait/1264739/20180121_032552?imageView2/2/w/40"></i>-->
        <!--<p>1</p></dd>-->
        <!--</dl>-->
        <!--</div>-->
        <div class="lr-danmu-reward">
            <dl class="danmulist"></dl>
        </div>
        <div class="scrolling-main" onclick="$('.controller-container').hide();">
            <header class="room-header">
                <div class="room-info-wrapper clearfix">
                    <div class="cover-zone">
                        <img alt="" class="coverimg" src="{$info.cover_pic}">
                    </div>
                    <div class="info-main">
                        <h2 class="live-name">{$info.title}</h2>
                        <div class="live-time"><span class="text-primary">{$info.begin_time|date="m-d H:i",###}</span>
                            准时开始
                        </div>
                    </div>
                </div>
                <a href="{:url('index/live_detail')}?id={$info.id}" title="查看详情" class="turn-btn">查看详情</a>
            </header>
            <!--VIP-->
            <!--<div id="room-vip-card" class="room-mod-card" style="display: block;">-->
            <!--<div class="show-buyvip-wrapper"><a href="/lesson/buy_vip?_source=yj_playroom" title="享受会员"-->
            <!--class="navgation"><img-->
            <!--src="/res/images/vip-column-live.png?v=20171212.172928" alt=""-->
            <!--class="vip-column-pic"></a></div>-->
            <!--</div>-->
            <!-- <div class="room-mod-card">
                <a href="/live/sale?live_id=1637" target="_blank" class="invite-mod">
                    <span class="sale-title">邀请朋友一起听课</span>
                    <span class="sale-profits" style="display: block;">赚0元</span>
                </a>
            </div> -->

            <div class="room-mod-card">
                <h4 class="rc-title">听课指南</h4>
                <div class="rc-main">
                    <div class="guide-zone"><p class="p1">1. 听不到声音请往下翻，点击语音即可播放，并确认手机没有静音。</p>
                        <p class="p1">2. 遇到卡顿和加载不出，点返回，重新进入即可。</p>
                        <p class="p1">3. 课程永久保留，可以无限回听。</p>
                        <p class="p1">4. 成功参与后可在讨论区提问和交流。</p>
                        <p class="p1">5. 您也可以点击上方邀请好友来听课，把好课分享给好友。</p>
                        <!--<p class="p1">6. 可关注<a href="javascript:;">『启蒙』公众号</a>，接收开课提醒、回听直播。</p>-->
                    </div>
                </div>
            </div>


            <div class="live-main" id="lists">
                <div class="more-loading" style="display: block;"><p class="text">滑动加载更多...</p></div>
                <div v-for="(item, index) in items" class="one-content-item">
                    <div class="lv-single" v-if="item.datatype == 'voice' " :content_id="item.data_id">
                        <div class="single-item clearfix">
                            <div class="avtar-zone">
                                <img alt="头像" class="avatar" :src="item.avatar">
                            </div>
                            <div class="si-wrapper">
                                <h4 class="siw-hd"><strong class="si-name">{{item.name}}</strong></h4>
                                <div class="siw-container single-voice" :style="{ width: item.awith }">
                                    <div data-id="103313" data-num="1" class="siw-main-wrap voice-main"
                                         onclick="player.play(this)" :type="item.type">
                                        <div class="si-content">
                                            <div class="">
                                                <div class="content-voice">
                                                    <audio preload="none" :src="item.audio" :ser-duration="item.time"
                                                           class="voice-audio"></audio>
                                                    <!--进度条-->
                                                    <section class="voi-control progressBar" style="display: none;">
                                                        <div class="bar-bg"></div>
                                                        <div class="voi-control speed voice-speed" style="width: 0%;">
                                                            <div class="voi-control drag voice-drag">
                                                                <!--<div class="playTime" style="display: none;"><span-->
                                                                <!--class="txt-tip"><var>0</var>″</span></div>-->
                                                            </div>
                                                        </div>
                                                    </section>


                                                    <!--总时长-->
                                                    <span class="time">{{item.time}}″</span>

                                                    <!--未听-->
                                                    <span class="not-listened"
                                                          style="display: block;right: -9px"></span>

                                                    <div class="voice-play-control">
                                                        <!--开始-->
                                                        <img src="/res/images/live-voice-start.png?v=20171209.193010"
                                                             class="voice-icon voice-content-start"
                                                             style="display: block">
                                                        <!--暂停-->
                                                        <img src="/res/images/live-voice-pause.png?v=20171209.193010"
                                                             class="voice-icon voice-content-pause"
                                                             style="display: none;">
                                                        <!--加载中-->
                                                        <img src="/res/images/live-loading.gif?v=20171209.193011"
                                                             class="voice-icon voice-content-loading"
                                                             style="display: none;">

                                                        <img src="/res/images/playing.png"
                                                             class="voice-icon voice-content-playing layui-anim layui-anim-scale layui-anim-loop"
                                                             style="animation-duration: 1.3s;display: none;">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="lv-single" v-if="item.datatype == 'text' " :content_id="item.data_id">
                        <div class="single-item clearfix">
                            <div class="avtar-zone">
                                <img alt="头像" class="avatar" :src="item.avatar">
                            </div>
                            <div class="si-wrapper">
                                <h4 class="siw-hd"><strong class="si-name">{{item.name}}</strong></h4>
                                <div class="siw-container single-text">
                                    <div class="siw-main-wrap auto-width">
                                        <div class="si-content">
                                            <div class="content-text">{{item.content}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="lv-single" v-if="item.datatype == 'img' " :content_id="item.data_id">
                        <div class="single-item clearfix">
                            <div class="avtar-zone"><img alt="头像" class="avatar" :src="item.avatar"></div>
                            <div class="si-wrapper">
                                <h4 class="siw-hd"><strong class="si-name">{{item.name}}</strong></h4>
                                <div class="siw-container single-image">
                                    <div class="siw-main-wrap">
                                        <div class="si-content">
                                            <div class="content-image">
                                                <div class="my-gallery" style="max-height: 600px; max-width: 200px;">
                                                    <img class="one-content-img" :src="item.img">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section class="room-footer-bar">
            <div class="lr-newmesTip"><a s href="javascript:;" class="lr-newmes-btn">0</a></div>
            <div class="lr-goPlay"><a href="javascript:;" class="lr-goplay-btn">回到播放位置</a></div>
            <button title="打赏" class="show-rereward-btn" onclick="ctrl.dashang()">
                <span class="text">赏</span>
            </button>
            <div class="right-operat-zone">
                <ul class="right-btns ">
                    <li class="item" style="display: block;">
                        <button type="button" onclick="scroll_top()" class="r-btn">
                            <img src="/res/images/lv-r-to-top.png?v=20171209.193010" alt="" class="o-icon">
                        </button>
                    </li>
                    <li class="item" style="display: block;">
                        <button type="button" onclick="scroll_bottom()" class="r-btn">
                            <img src="/res/images/lv-r-to-bottom.png?v=20171209.193009" alt="" class="o-icon">
                        </button>
                    </li>
                </ul>
            </div>
            <div>
                <nav class="nav">
                    <ul class="tool-bar">
                        <li class="tl-item">
                            <button type="button" class="tl-invite" onclick="ctrl.invite()">
                                <img src="/res/images/lv-bar-invite.png?v=20170722.014513" alt="邀请卡"
                                     class="icon icon-invite">
                            </button>
                        </li>
                        <li class="tl-item tl-discusbox">
                            <button type="button"
                                    onclick="ctrl.open_talk()"
                                    class="show-discussion-btn">
                                去讨论区发言
                            </button>
                        </li>

                        <li class="tl-item">
                            <button type="button" class="tl-control" onclick="$('.controller-container').toggle();">
                                <img src="/res/images/lv-bar-control.png?v=20170722.014513" alt="功能"
                                     class="icon icon-control">
                            </button>
                        </li>
                    </ul>
                </nav>
                <div class="tool-bar-bottom control-zooe">
                    <div class="controller-container clearfix" style="display: none;">
                        <div class="control-bd">
                            <ul class="control-tool-list">
                                <li class="item" onclick="ctrl.invite()">
                                    <img src="/res/images/tool-invite.png?v=20170914.095522" alt="" class="icon">
                                    <span class="text">邀请好友</span>
                                </li>

                                <li class="item" onclick="ctrl.give()">
                                    <div>
                                        <img src="/res/images/tool-gifts.png?v=20171209.193009" alt="" class="icon">
                                        <span class="text">赠送好友</span>
                                    </div>
                                </li>

                                <li class="item" onclick="ctrl.live_detail()">
                                    <img src="/res/images/tool-to-detail.png?v=20170914.095523" alt="" class="icon">
                                    <span class="text">直播详情</span>
                                </li>
                                <li class="item" onclick="ctrl.reward()">
                                    <div>
                                        <img src="/res/images/tool-reward.png?v=20170914.095523" alt="" class="icon">
                                        <span class="text">打赏记录</span>
                                    </div>
                                </li>
                                <!--<li class="item">-->
                                <!--<img  src="/res/images/tool-recall.png?v=20170913.140237" alt=""-->
                                <!--class="icon"> -->
                                <!--<span class="text">如何回听</span>-->
                                <!--</li>-->
                                <li class="item" onclick="ctrl.more_lives()">
                                    <img src="/res/images/tool-to-home.png?v=20170914.095522" alt="" class="icon">
                                    <span class="text">更多直播</span>
                                </li>

                                <li class="item" onclick="ctrl.my_home()">
                                    <img src="/res/images/tool-to-mine.png?v=20170914.095522" alt="" class="icon">
                                    <span class="text">个人中心</span>
                                </li>

                                <li class="item" onclick="ctrl.new_lives()">
                                    <div>
                                        <img src="/res/images/tool-to-create.png?v=20170914.095522" alt="" class="icon">
                                        <span class="text">我要开直播</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>


    <!--<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>
        wx.config({
            debug: false,
            appId: '{$jsconfig.appId}',
            timestamp: '{$jsconfig.timestamp}',
            nonceStr: '{$jsconfig.noncestr}',
            signature: '{$jsconfig.signature}',
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'hideMenuItems',
                'showMenuItems',
                'hideAllNonBaseMenuItem',
                'showAllNonBaseMenuItem',
                'translateVoice',
                'startRecord',
                'stopRecord',
                'onRecordEnd',
                'playVoice',
                'pauseVoice',
                'stopVoice',
                'uploadVoice',
                'downloadVoice',
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
                'getNetworkType',
                'openLocation',
                'getLocation',
                'hideOptionMenu',
                'showOptionMenu',
                'closeWindow',
                'scanQRCode',
                'chooseWXPay',
                'openProductSpecificView',
                'addCard',
                'chooseCard',
                'openCard'
            ]
        });
        wx.isInit = false;
    </script>
    <script>
        wx.ready(function () {

            wx.isInit = true;
            // 3 智能接口
            var voice = {
                localId: '',
                serverId: ''
            };


            // 5 图片接口
            // 5.1 拍照、本地选图
            var images = {
                localId: [],
                serverId: []
            };




        });

        wx.error(function (res) {
            console.log(res.errMsg);
        });
    </script>


    <script>


        var ws_url = 'ws://' + document.domain + ':8383';
        var socket = new WebSocket(ws_url);
        socket.onopen = function () {

        }
        socket.onmessage = function (e) {
            var msg = JSON.parse(e.data);
            if (!msg.type) return;


            switch (msg.type) {


                case 'init':

                    var content = {
                        token: '{$user.openid}', live_id: '{$info.id}'
                    }
                    socket_send({type: 'auth', content: content});

                    return;

                case 'text':

                    var li = msg.content;
//                                    lists.items.push(li);
                    player.push_li(li)
                    $('#content-text-area').val('');
                    chet_text();

                    return;

                case 'voice':

                    var li = msg.content;
//                                    lists.items.push(li);
                    player.push_li(li)

                    $('.recording-ani').hide();
                    $('.layui-an1').show();

                    $('.btn-recording').hide();
                    $('.start-rec').show();

                    $('.types-wrap').show();
                    $('.text-ing1').show();
                    $('.text-ing2').hide();

                    return;

                case 'img':
                    var li = msg.content;

                    console.log(li);
//                                    lists.items.push(li);
                    player.push_li(li)
                    return;


                case 'talk':

                    var li = msg.content;
//                                    lists.items.push(li);
                    talk.items.push(li);
                    $('#discuss-text-area').val('');
                    talk_scroll_bottom();

                    return;


                case 'talk_del':
                    var data_id = msg.data_id;
                    $("li[data_id='" + data_id + "']").remove();

                    return;
                case 'talk_jinyan':
                    var live_id = '{$info.id}';
                    if (live_id == msg.live_id) {
                        jinyan();
                    }


                    return;

                case 'recall':
                    var data_id = msg.data_id;
                    $("div[content_id='" + data_id + "']").remove();

                    return;


            }


        }
        socket.onclose = function () {
            console.log('服务关闭');
        }

        socket.onerror = function () {
            console.log('服务异常');
        }

        var images = {
            localId: [],
            serverId: []
        };

        //发送socket消息
        function socket_send(obj) {
            socket.send(JSON.stringify(obj));
        }


        var record = {

            start_time: 0,
            end_time: 0,

            start: function () {

                if (!wx.isInit) {
                    alert('音箱师就位中...')
                    return false;
                }

                player.stop();

                $('.recording-ani').hide();
                $('.layui-an2').show();

                $('.btn-recording').hide();
                $('.stop_rec').show();

                $('.text-ing1').hide();
                $('.text-ing2').show();

                wx.startRecord({
                    cancel: function () {
                        alert('用户拒绝授权录音');
                    }
                });
                record.start_time = new Date().getTime();

            },
            stop: function () {
                $('.btn-recording').hide();
                $('#send-click-btn').show();
                $('.send_rec').show();

                $('.types-wrap').hide();
                $('.click-record-cancel').show();

                wx.stopRecord({
                    success: function (res) {
                        voice.localId = res.localId;
                    },
                    fail: function (res) {
                        console.log(JSON.stringify(res));
                    }
                });
                record.end_time = new Date().getTime();
            },
            cancel: function () {
                wx.stopRecord({
                    success: function (res) {
                        voice.localId = res.localId;
                    },
                    fail: function (res) {
                        console.log(JSON.stringify(res));
                    }
                });
                cancel_voice();
            },
            send_voice: function () {

                var diff_time = (record.end_time - record.start_time) / 1000;
                diff_time = Math.round(diff_time);
                var awith = '40%';
                console.log(diff_time);
                if (diff_time < 10 && diff_time > 3) {
                    awith = diff_time * 10 + '%';
                } else if (diff_time < 4) {
                    awith = '40%';
                } else {
                    awith = '100%';
                }

                wx.uploadVoice({
                    localId: voice.localId,
                    success: function (res) {
                        console.log(res);
//                                    alert('上传语音成功，serverId 为' + res.serverId);
                        voice.serverId = res.serverId;
                        var li = {
                            name: '大官人',
                            time: diff_time,
                            type: 2,
                            datatype: 'voice',
                            awith: awith,
//                                            audio: voice.localId,
                            audio: res.serverId,
                            avatar: 'https://img.wekuo.com/upload/user/portrait/2378148/20180126_175014?imageView2/2/w/80',

                        }

                        socket_send({type: 'voice', content: li});


                    }
                });
            },
            send_img: function (img_id) {

                var li = {
                    name: '胡大官人 | 主持人',
                    img: img_id,
                    time: false,
                    type: 1,
                    datatype: 'img',
                    awith: false,
                    audio: false,
                    avatar: 'https://img.wekuo.com/upload/user/portrait/2378148/20180126_175014?imageView2/2/w/80',

                }
                socket_send({type: 'img', content: li})


            },
            send_text: function (that) {
                var content = $('#content-text-area').val();
                if (!content) {
                    return false;
                }

                var li = {
                    name: '胡大官人 | 主持人',
                    content: content,
                    time: false,
                    type: 1,
                    datatype: 'text',
                    awith: false,
                    audio: false,
                    avatar: 'https://img.wekuo.com/upload/user/portrait/2378148/20180126_175014?imageView2/2/w/80',

                }
                socket_send({type: 'text', content: li});

            },
            choose_img: function () {

                if (!wx.isInit) {
                    alert('音箱师就位中...')
                    return false;
                }

                wx.chooseImage({
                    success: function (res) {
                        images.localId = res.localIds;
                        console.log('已选择 ' + res.localIds.length + ' 张图片');
                        var i = 0, length = images.localId.length;
                        images.serverId = [];
                        function upload() {
                            wx.uploadImage({
                                localId: images.localId[i],
                                success: function (res) {

                                    i++;
                                    console.log('已上传：' + i + '/' + length);
                                    //单个上传完成时
                                    record.send_img(res.serverId);

                                    images.serverId.push(res.serverId);
                                    if (i < length) {
                                        upload();
                                    } else {
                                        //全部上传完成时


                                    }
                                },
                                fail: function (res) {
                                    alert(JSON.stringify(res));
                                }
                            });
                        }

                        upload();

                    }
                });
            },


        }


        var player = {
            that: '',
            play: function (that) {

                if (!wx.isInit) {
                    alert('音箱师就位中...')
                    return false;
                }

                record.stop();
                player.that = that;
                console.log(that);
                var type = $(that).attr('type');
                if (type == 1) {
                    var audio = $(that).find('.voice-audio')[0];
                    audio.play();
                    player.speed2(that);
//                                var time = setInterval(function () {
//                                    var w = player.speed(that);
//                                    if (w == 1) {
//                                        clearInterval(time);
//                                        $(that).find('.progressBar').hide();
//                                        $(that).find('.not-listened').hide();
//
//                                        $(that).find('.voice-icon').hide();
//                                        $(that).find('.voice-content-start').show();
//
//                                    }
//                                }, 50);

                } else if (type == 2) {

                    var voice_id = $(that).find('.voice-audio').attr('src');


                    wx.downloadVoice({
                        serverId: voice_id,
                        success: function (res) {
                            console.log('下载语音成功，localId 为' + res.localId);
//                                        voice.localId = res.localId;
                            wx.playVoice({
                                localId: res.localId
                            });
                            player.speed2(that);
                        }
                    });


                }


            },
            pause: function () {

            },
            stop: function () {

                var that = player.that;

                var localId = $(that).find('.voice-audio').attr('src');
                wx.stopVoice({
                    localId: localId
                });

                $(that).find('.not-listened').hide();

                $(that).find('.voice-icon').hide();
                $(that).find('.voice-content-start').show();


            },
            speed: function (that) {

                $(that).find('.progressBar').show();

                $(that).find('.voice-icon').hide();
                $(that).find('.voice-content-pause').show();
                var audio = $(that).find('.voice-audio')[0];
                var duration = $(audio).attr('ser-duration');
                var widthRadio = 1;
                try {
                    widthRadio = Math.min(audio.currentTime / duration, 1);
                } catch (err) {
                    console.log('widthRadio, err:', err);
                }


                if (widthRadio != 0) {
                    $(that).find('.voice-speed')[0].style.width = widthRadio * 100 + "%";
                }
                return widthRadio;

            },
            speed2: function (that) {

//                            $(that).find('.progressBar').show();
                $(that).find('.voice-icon').hide();
                $(that).find('.voice-content-playing').show();
                var audio = $(that).find('.voice-audio')[0];
                var duration = $(audio).attr('ser-duration');
                console.log(duration * 1000);
                setTimeout(function () {
                    $(that).find('.not-listened').hide();

                    $(that).find('.voice-icon').hide();
                    $(that).find('.voice-content-start').show();
                }, duration * 1000)


            },
            push_li: function (li) {
                lists.items.push(li);
                setTimeout(function () {
                    scroll_bottom();
                }, 1000)
            }


        };


        var lists = new Vue({
            el: '#lists',
            data: {
                items:[],
//                items: [
//                    {
//                        name: '胡大官人',
//                        time: 14,
//                        type: 1,
//                        datatype: 'voice',
//                        awith: '100%',
//                        data_id: 1,
//                        audio: 'http://alcdn.wekuo.com/live-sys/system_start.mp3',
//                        avatar: 'https://img.wekuo.com/upload/user/portrait/2378148/20180126_175014?imageView2/2/w/80',
//
//                    },
//                    {
//                        name: '胡大官人 | 主持人',
//                        content: '现练习一下现练习一下现练习一下现练习一下现练习一下现练习一下现练习一下现练习一下',
//                        time: false,
//                        type: 1,
//                        datatype: 'text',
//                        data_id: 2,
//                        awith: false,
//                        audio: false,
//                        avatar: 'https://img.wekuo.com/upload/user/portrait/2378148/20180126_175014?imageView2/2/w/80',
//
//                    },
//                    {
//                        name: '胡大官人 | 关注二维码后测试',
//                        img: '/res/images/test_qr.jpg',
//                        time: false,
//                        type: 1,
//                        datatype: 'img',
//                        data_id: 3,
//                        awith: false,
//                        audio: false,
//                        avatar: 'https://img.wekuo.com/upload/user/portrait/2378148/20180126_175014?imageView2/2/w/80',
//
//                    }
//
//                ],
            }
        });


        //消息
        $(function () {
            $.get("{:url('live/get_live_content')}",{id:'{$info.id}'},function (res) {
                console.log(res.data);
                if(res.code==1){
                    lists.items=res.data;
                }
            });
        });


        var ctrl = {

            //邀请
            invite: function () {
                location.href = "{:url('live/invite')}?live_id={$info.id}";
            },
            //赠送
            give: function () {
                $('.packGiftDia').fadeIn(300);
            },
            live_detail: function () {
                location.href = "{:url('index/live_detail')}?id={$info.id}";
            },
            //链接
            link: function () {
                $('.urlshow-dialog').fadeIn(300);
            },
            //打赏
            reward: function () {
                location.href = "{:url('live/reward')}?id={$info.id}";
            },
            //打赏
            dashang: function () {
                $('.reward-dialog').fadeIn(300);
            },
            //生成二维码
            qr: function (url) {
                $('#qr_img').html('');
                var qrcode = $('#qr_img').qrcode(
                    {width: 200, height: 200, correctLevel: 0, text: url}
                ).hide();
                //生成图片
                var canvas = qrcode.find('canvas').get(0);
                $('#imgOne').attr('src', canvas.toDataURL('image/jpg'))


                $('#qr_dialog').fadeIn();

            },
            open_talk: function () {
                $('.controller-container').hide();
                $('.lr-discussion-box').show();
//                $('.lr-discussion-box').show();
                talk_scroll_bottom();
            },
            more_lives: function () {
                location.href = "{:url('index/all')}";
            },
            my_home: function () {
                location.href = "{:url('index/mine')}";
            },
            new_lives: function () {
                location.href = "{:url('index/live_add')}";
            }


        }


    </script>


    <!--打赏-->
    <div class="dialog reward-dialog" style="display: none;">
        <div class="dialog-bg" onclick="$('.dialog').hide();"></div>
        <div id="reward-dialog-main" class="dialog-main">
            <div class="rwdl-userinfo-zone">
                <div class="rwdl-portrait-zone">
                    <img alt="" class="rwdl-portrait" src="{$info.photo}">
                    <div class="change-teacher-btn" style="display: none;">
                        <img src="/res/images/icon-change-type@24x24.png?v=20171218.180433" alt="" class="icon"> <span
                            class="text">切换</span>
                    </div>
                </div>
                <h5 class="rwdl-nickname">{$info.live_name}</h5>
            </div>
            <p class="rwdl-rwtip">打赏主播</p>
            <ol class="rwdl-btns clearfix">
                <li><a href="javascript:;" data-value="2" class="text" onclick="rewards(0.01)">¥ <span class="rwdl-num">0.01</span></a></li>
                <li class="on"><a href="javascript:;" data-value="5" class="text" onclick="rewards(5)">¥ <span class="rwdl-num">5</span></a>
                </li>
                <li><a href="javascript:;" data-value="6" class="text" onclick="rewards(6)">¥ <span class="rwdl-num">6</span></a></li>
                <li><a href="javascript:;" data-value="8" class="text" onclick="rewards(8)">¥ <span class="rwdl-num">8</span></a></li>
                <li><a href="javascript:;" data-value="10" class="text" onclick="rewards(10)">¥ <span class="rwdl-num">10</span></a></li>
                <li><a href="javascript:;" data-value="20" class="text" onclick="rewards(20)">¥ <span class="rwdl-num">20</span></a></li>
            </ol>
            <!-- <div class="rwdl-other-zone">
                <div class="other-control"><input type="number" id="reward-othnum" placeholder="其他金额" class="other-num">
                </div>
                <div class="btn-zone">
                    <button type="button" class="confirm-other-btn disabled" onclick="rewards()"> 确定</button>
                </div>
            </div> -->
            <div class="dialog-close" onclick="$('.dialog').hide();"></div>
        </div>
        <script>
            $('#reward-othnum').keyup(function () {
                if ($(this).val() * 1 > 0) {
                    $('.confirm-other-btn').removeClass('disabled');
                } else {
                    $('.confirm-other-btn').addClass('disabled');
                }
            });

            // 购买
            function rewards(money)
            {
                // layer.open({
                //     content: '确定要购买吗'
                //     , btn: ['是的', '取消']
                //     , yes: function (index) {
                //         location.replace("{:url('orders/reward')}?live_id={$info.id}&uid={$info.uid}&money="+money);
                //     }
                // });
                var url = "{:url('orders/reward')}?live_id={$info.id}&uid={$info.uid}&money="+money;
                $.get(url,'',function (res) {
                        var jsApiParameters = res;
                        callpay(jsApiParameters);

                        $('.dialog').hide();
                });
            }


            function jsApiCall(jsApiParameters)
            {
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',
                    jsApiParameters,
                    function(res){
                        if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                            //使用以上方式判断前端返回,微信团队郑重提示：
                            // res.err_msg将在用户支付成功后返回
                            //  ok，但并不保证它绝对可靠。
                            //跳转页面window.localtion.href='';
                            window.localtion.href="{:url('index/index/joinlive')}";
                        }else{
                            // alert('支付出现错误！'+res.err_code+res.err_desc+res.err_msg);
                            // alert(res.err_code+res.err_desc+res.err_msg); // 显示错误信息
                        }
                    }
                );
            }
            function callpay(jsApiParameters)
            {
                if (typeof WeixinJSBridge == "undefined"){
                    if( document.addEventListener ){
                        document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
                    }else if (document.attachEvent){
                        document.attachEvent('WeixinJSBridgeReady', jsApiCall);
                        document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
                    }
                }else{
                    jsApiCall(jsApiParameters);
                }
            }

        </script>
    </div>


    <!--讨论组-->
    <section class="lr-discussion-box" id="msg_bos" style="display: none;">
        <div class="bg-close" onclick="$('.lr-discussion-box').hide()"></div>
        <div class="lrcm-body">
            <div class="body-top-bar">
                <h5 class="bar-title">讨论<span>({{ counter }})</span></h5>
                <button type="button" class="backBtn" onclick="$('.lr-discussion-box').hide()">
                    <img src="/res/images/icon-arr-bottom.png?v=20171209.193011" alt="" class="icon">
                </button>
            </div>
            <div id="discuss-room" class="lrcmb-verticalMain">
                <ul id="rd-discuss" class="lrcmb-vm-list" v-for="(item, index) in items">
                    <!--<li class="click-more-item">-->
                    <!--<div id="temp-img-container" class="commenter-main">&lt;!&ndash;&ndash;&gt;</div>-->
                    <!--</li>-->

                    <li :data_id="item.data_id"
                        class="clearfix one-discuss-item">
                        <img alt="" class="commenter-portrait" :src="item.avatar">
                        <div class="commenter-main">
                            <h6 class="cmter-nickname">
                                <span>{{item.name}}</span>
                                <span v-if="item.type == 2 " class="layui-btn  layui-btn-normal layui-btn-xs">主播</span>
                            </h6>
                            <div><p class="cmter-content">{{item.content}}</p></div>
                            <div class="cmter-data">
                                <span class="time">{{item.time}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>


            <div class="room-footer-bar talk-footer-bar" style="display: block">
                <!--<div class="lr-goPlay-room" style="display: block"><a href="javascript:;" class="lr-goplay-btn">回到直播</a></div>-->
                <nav class="nav">
                    <ul class="tool-bar">
                        <li class="tl-item">
                            <button type="button" onclick="ctrl.invite()" class="tl-invite">
                                <img src="/res/images/lv-bar-invite.png?v=20171209.193011" alt="邀请卡"
                                     class="icon icon-invite">
                            </button>
                        </li>
                        <li class="tl-item tl-discusbox">
                            <div class="discussion-zone">
                                <textarea v-show="jinyan==0" v-cloak id="discuss-text-area" name=""
                                          placeholder="点击这里输入文字" class="discuss-input-text"></textarea>
                                <textarea v-show="jinyan==1" v-cloak id="discuss-text-area2" name="" readonly
                                          placeholder="禁言中" class="discuss-input-text"></textarea>
                                <!--<div class="ask-label-box">-->
                                <!--<input id="lrsend-ask3" type="checkbox" name="lrsend-ask3"-->
                                <!--value="" class="control-ask">-->
                                <!--<label for="lrsend-ask3" class="ask-label"></label>-->
                                <!--提问-->
                                <!--</div>-->
                            </div>
                        </li>
                        <li class="tl-item">
                            <button type="button" onclick="talk_send()" class="tl-discussend-btn">发送</button>
                        </li>
                        <!--<li class="tl-item" style="display: none;">-->
                        <!--<button type="button" class="tl-image"><img-->
                        <!--src="/res/images/lv-bar-image.png?v=20171209.193011" alt="图片"-->
                        <!--class="icon icon-image">-->
                        <!--</button>-->
                        <!--</li>-->
                    </ul>
                </nav>
            </div>
        </div>
    </section>


    <script>
        var talk = new Vue({
            el: '#msg_bos',
            data: {
                counter: 2,
                name: 0,
                avatar: 0,
                content: 0,
                jinyan: '{$jinyan}',
                items: [],
//                items: [
//                    {
//                        name: '胡大官人',
//                        content: '第一次直播',
//                        time: '20:33',
//                        type: 1,
//                        data_id: 1,
//                        avatar: 'https://img.wekuo.com/upload/user/portrait/2378148/20180126_175014?imageView2/2/w/80',
//
//                    },
//                    {
//                        name: '胡大官人',
//                        content: '6666',
//                        time: '20:33',
//                        type: 2,
//                        data_id: 2,
//                        avatar: 'https://img.wekuo.com/upload/user/portrait/2378148/20180126_175014?imageView2/2/w/80',
//
//                    },
//                    {
//                        name: '胡大官人',
//                        content: '7777777777',
//                        time: '20:33',
//                        type: 1,
//                        data_id: 3,
//                        avatar: 'https://img.wekuo.com/upload/user/portrait/2378148/20180126_175014?imageView2/2/w/80',
//
//                    },
//                    {
//                        name: '胡大官人',
//                        content: '8888888888888888888888888888888888888888888888888888888888888888888888888888',
//                        time: '20:33',
//                        type: 2,
//                        data_id: 4,
//                        avatar: 'https://img.wekuo.com/upload/user/portrait/2378148/20180126_175014?imageView2/2/w/80',
//
//                    },
//
//                    {
//                        name: '胡大官人',
//                        content: '9999999999999999999999999999999999999999999999999999999999999999999999999999999',
//                        time: '20:33',
//                        type: 1,
//                        data_id: 5,
//                        avatar: 'https://img.wekuo.com/upload/user/portrait/2378148/20180126_175014?imageView2/2/w/80',
//
//                    },
//
//                    {
//                        name: '胡大官人',
//                        content: '1111111111111111111111111111111111111111111111111111111111111111111111111111111111',
//                        time: '20:33',
//                        type: 2,
//                        data_id: 6,
//                        avatar: 'https://img.wekuo.com/upload/user/portrait/2378148/20180126_175014?imageView2/2/w/80',
//
//                    },
//
//                ],
            },
            // 在 `methods` 对象中定义方法
            methods: {}
        })


        //讨论消息
        $(function () {
            $.post("{:url('live/get_talk')}", {id: '{$info.id}'}, function (res) {
                console.log(res.data);
                if (res.code == 1) {
                    talk.items = res.data;
                    talk.counter=res.data.length;
                }
            });
        });

        //发送讨论

        function talk_send() {

            var content = $('#discuss-text-area').val();
            if (!content) {
                return false;
            }
            var li = {
                name: '{$user.nickname}',
                content: content,
                time: false,
                type: 1,
                data_id: 0,
                datatype: 'talk',
                uid: '{$userid}',
                live_id: '{$info.id}',
                avatar: '{$user.photo}',

            }
            socket_send({type: 'talk', content: li})


        }


        //禁言
        function jinyan() {

            var jinyan = talk.jinyan;
            if (jinyan == 0) {
                talk.jinyan = 1;
                talk.jinay_text = '取消禁言';
            } else {
                talk.jinyan = 0;
                talk.jinay_text = '禁言';
            }

        }


//        function scroll_top() {
//            $('.scrolling-main').animate({scrollTop: $('.flex-main').offset().top}, 300);
//        }
//        var a = 500;
//        function scroll_bottom() {
//            a = a + 500;
//            $('.scrolling-main').animate({scrollTop: $('.room-footer-bar').offset().top + a}, 300);
//        }
//        var h = 76;
//        function talk_scroll_bottom() {
//            h = h + 76;
//            setTimeout(function () {
//                $('#discuss-room').animate({scrollTop: $('.talk-footer-bar').offset().top + $('#discuss-room').height() + h}, 300);
//            }, 1000)
//
//        }

        function scroll_top() {
            $('.scrolling-main').animate({scrollTop: $('.flex-main').offset().top}, 300);
        }
        var h2=$('.one-content-item').length*500;
        function scroll_bottom() {
            h2 = h2 + 500;
            $('.scrolling-main').animate({scrollTop: $('.room-footer-bar').offset().top+$('#lists').height() + h2}, 300);
        }
        var h=$('.one-discuss-item').length*101;
        function talk_scroll_bottom() {
            h = h + 101;
            setTimeout(function () {
                $('#discuss-room').animate({scrollTop: $('.talk-footer-bar').offset().top + $('#discuss-room').height() + h}, 100);
            }, 300)

        }



    </script>


    <!--购买弹层-->
    <div id="pay_dialog" class="qrpay-dialog" style="display: none;">
        <div class="withdraw-wrapper">
            <div class="dialog-main">
                <div class="dialog-header">
                    <div class="title">长按识别二维码进行付款</div>
                </div>
                <div class="dialog-body">
                    <div class="weixin">
                        <p class="qrpay-tit">支付金额： <span class="num purchase_qrcode_money">{$info.price}</span>元</p>
                        <img src="/res/images/qr-live.jpg?v=20171209.193010" alt="微信支付" style="padding: 20px"
                             class="qr-card purchase_qrcode_img">
                    </div>
                </div>
                <div class="dialog-footer">
                    <span class="close" onclick="$('#pay_dialog').hide()" style="
                                position: absolute;
                                top: 108%;
                                left: 50%;
                                z-index: 1;
                                margin: -22px 0 0 -22px;
                                display: inline-block;
                                width: 44px;
                                height: 44px;
                                background: url(/res/images/lv-ico-close1.png) center center no-repeat;
                                background-size: 35px 35px;">
                    </span>
                </div>
            </div>
        </div>
    </div>


    <!--赠送弹层-->
    <div class="dialog packGiftDia" style="display: none;">
        <div class="dialog-bg" onclick="$('.packGiftDia').hide()"></div>
        <div id="pack-gifts" class="dialog-bottomMain">
            <ul class="content-list">
                <li class="i-info">
                    <h5 class="title">打包豪礼赠送给好友们来听课！</h5>
                    <p class="time">直播于<span> {$info.begin_time|date="Y-m-d H-m:s",###} </span>开始</p>
                </li>
                <li class="i-main-box">
                    <h5 class="im-title">赠送数量</h5>
                    <ol id="rwdl-gifts-nums" class="rwdlgifts-btns clearfix">
                        <li class=""><a href="javascript:;" data-value="1">1份</a></li>
                        <li class="on"><a href="javascript:;" data-value="2">2份</a></li>
                        <li class=""><a href="javascript:;" data-value="5">5份</a></li>
                        <li class=""><a href="javascript:;" data-value="10">10份</a></li>
                        <li class=""><a href="javascript:;" data-value="20">20份</a></li>
                        <li class=""><a href="javascript:;" data-value="50">50份</a></li>
                    </ol>
                    <div class="i-flex">
                        <input type="hidden" name="price" id="price" value="{$info.price}">
                        <div class="i-left">共计：<span id="total-money" class="money">¥ 0.00</span></div>
                        <!--<div class="i-right">-->
                        <!--<ol class="num-btns clearfix">-->
                        <!--<li id="sub-count-btn" class="btn" style="padding-top: 5px">-->
                        <!--其它-->
                        <!--&lt;!&ndash;<a href="javascript:;">&ndash;&gt;-->
                        <!--&lt;!&ndash;<img&ndash;&gt;-->
                        <!--&lt;!&ndash;src="/res/images/live-num2.png?v=20171209.193010"&ndash;&gt;-->
                        <!--&lt;!&ndash;alt="减">&ndash;&gt;-->
                        <!--&lt;!&ndash;</a>&ndash;&gt;-->
                        <!--</li>-->
                        <!--<li class="income">-->
                        <!--<input type="number" min="1" max="99999" step="1"-->
                        <!--class="income-number">-->
                        <!--</li>-->
                        <!--&lt;!&ndash;<li id="add-count-btn" class="btn"><a href="javascript:;"><img&ndash;&gt;-->
                        <!--&lt;!&ndash;src="/res/images/live-num1.png?v=20171209.193010"&ndash;&gt;-->
                        <!--&lt;!&ndash;alt="加"></a></li>&ndash;&gt;-->
                        <!--</ol>-->
                        <!--</div>-->
                    </div>
                    <p class="im-tip">领取后，好友即可免费参加该课程，课程永久有效。</p>
                </li>
                <li>
                    <button type="button" class="footer-btn pack"
                            onclick="$('.dialog').hide();$('.pack_success').fadeIn(300)">打包赠礼
                    </button>
                </li>
            </ul>
        </div>
    </div>

    <script>
        function total() {
            var price = $('#price').val();
            var totalmoney = $('#total-money');
            var num = $('#rwdl-gifts-nums li.on a').attr('data-value');
            // console.log(price);
            // console.log(num);
            var total = price * num;
            //保留2位小数
            total = Math.round(total * 100) / 100
            // console.log(total);
            totalmoney.text("¥ " + price * num);

        }


        $(function () {
            total();
        });
        $('#rwdl-gifts-nums li').click(function () {
            $('#rwdl-gifts-nums li').removeClass('on');
            $(this).addClass('on');
            total();
        });


    </script>

    <!--赠送成功-->
    <div class="dialog checkPackGiftDia pack_success" style="display: none;">
        <div class="dialog-bg"></div>
        <div class="dialog-bottomMain">
            <ul class="content-list">
                <li class="i-ready"><h5 class="title">您的赠礼已经包装好～</h5>
                    <p class="text">查看领取情况，请在“<span class="text-primary">赠送给好友</span>”中查看</p></li>
                <li><a href="{:url('index/center')}" type="button" class="footer-btn check-pack">查看赠礼</a></li>
            </ul>
        </div>
    </div>


    <!--倒计时-->
    {if $info.begin_time > $nowTime && $info.state ==0}
    <div id="status-wait-dlg" class="dialog countDownDia" style="display: block;">
        <div class="dialog-bgc"></div>
        <div class="dialog-main">
            <div class="dialog-title">距离课堂开始还有</div>
            <div class="dialog-content">
                <ol class="countdown-box">
                    <li id="day-count" class="num">1</li>
                    <li class="unit">天</li>
                    <li id="hour-count" class="num">3</li>
                    <li class="unit">时</li>
                    <li id="min-count" class="num">05</li>
                    <li class="unit">分</li>
                    <li id="sec-count" class="num">7</li>
                    <li class="unit">秒</li>
                </ol>
            </div>
            <button type="button" class="dialog-btclose" onclick="$('.dialog').hide();">我知道了</button>
        </div>
    </div>
    {/if}

    <script>
        layui.use('util', function () {
            var util = layui.util;
            //示例
            var endTime = {$info.endTime
        } //假设为结束日期
            ,
            serverTime = {$info.newTime
        }
            ; //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的

            util.countdown(endTime, serverTime, function (date, serverTime, timer) {
                $('#day-count').text(date[0]);
                $('#hour-count').text(date[1]);
                $('#min-count').text(date[2]);
                $('#sec-count').text(date[3]);

            });
        });
    </script>


    <!--结束-->
    {if $info.state == 1}
    <div id="status-finish-dlg" class="dialog welcomeDia" style="display: block;">
        <div class="dialog-bgc"></div>
        <div class="dialog-main">
            <div class="dialog-title">课程已结束</div>
            <div class="dialog-content"></div>
            <div class="dialog-footer">
                <a href="javascript:scroll_top();$('.dialog').hide();" class="dialog-cancel-btn dialog-btn"
                   style="display: block;">从第一条开始听</a>
                <a href="javascript:;" class="dialog-confirm-btn dialog-btn listen-first-btn2"
                   onclick="$('#status-finish-dlg').hide()">开始回听</a>
            </div>
        </div>
    </div>
    {/if}


</div>
</body>
</html>